import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
//import Using ES6 syntax
import WeUI from 'react-weui';

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
const {Button, ButtonArea, Toptips, Input} = WeUI;
import {CSS} from '../styles/CreateTeamStyle.css';

export default class CreateTeam extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.FinisClick = this.FinisClick.bind(this);
        this.state = {
            from: this.props.location.query.from,
            showWarn: false,
            warnTimer: null,
            tipText: "",
        };
        this.state.warnTimer && clearTimeout(this.state.warnTimer);
    }

    componentWillMount() { //组件即将被插入
    }

    showWarn(text) {
        this.setState({showWarn: true, tipText: text});

        this.state.warnTimer = setTimeout(() => {
            this.setState({showWarn: false});
        }, 2000);
    }

    LeftClick() {
    }

    FinisClick() {
        let teamName = document.getElementById("TeamNameInput").value
        if (teamName == "") {
            this.showWarn("企业名称不能为空");
            return;
        }
        let createTeamUrl = "/team";
        let self = this;
        fetch(getHost() + createTeamUrl, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            credentials: 'include',
            body: "name=" + teamName + "",
        }).then(function (res) {
            if (res.ok) {
                markDataRequestFlag();
                if (self.state.from && self.state.from == "edit") {
                    window.location.hash = "/CreateTeamSuccess?from=edit";
                } else {
                    window.location.hash = "/CreateTeamSuccess";
                }
            } else if (res.status == 401) {
                self.showWarn("Oops! You are not authorized.");
            }
        }, function (e) {
            self.showWarn("失败");
        });
    }

    render() {
        return (
            <div>
                <NavigationBar Title="创建企业" LeftBar="true" LeftTitle=""
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <div id="TeamTitle">创建企业</div>
                <div id="TeamNameDivStyle">
                    <div id="TeamNameTitle">企业名称</div>
                    <Input id="TeamNameInput" placeholder='(20字内)' maxLength="20"/>
                </div>
                <div id="FinishDivStyle">
                    <ButtonArea direction="horizontal">
                        <Button type="default" id="FinishButtonStyle" onClick={this.FinisClick}>完成</Button>
                    </ButtonArea>
                </div>
                <Toptips type="warn" show={this.state.showWarn}>{this.state.tipText}</Toptips>
            </div>
        )
    }
}

//属性默认值
CreateTeam.defaultProps = {};

//属性
CreateTeam.propTypes = {};